<template>
  <div>
    <el-table
      :header-cell-style="{ background: '#f5f6f6' }"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="title"
        show-overflow-tooltip
        label="操作按钮"
        align="center"
      >
      </el-table-column>
      <!-- <el-table-column label="显示名称" align="center" width="300px">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name"
            v-show="scope.row.showInput"
            style="width: 100%"
            @blur="scope.row.showInput = false"
          ></el-input>
          <el-link
            v-show="!scope.row.showInput"
            @click="scope.row.showInput = true"
          >
            {{ scope.row.name }}
            <i class="el-icon-edit" style="margin-right: 10px"></i>
          </el-link>
        </template>
      </el-table-column> -->
      <el-table-column label="启用" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isSelected"
            @change="changeBtn(scope.row)"
            :disabled="
              scope.row.key == 'agreeBtn' || scope.row.key == 'refuseBtn'
            "
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="isShowDynamic" style="width: 80%; margin-left: 10%">
      <el-divider>动态指定按钮设置</el-divider>
      <el-form
        ref="form"
        :model="form"
        label-width="150px"
        label-position="left"
      >
        <el-form-item label="按钮名称">
          <el-input v-model="form.autoNextName" @change="getName"></el-input>
        </el-form-item>
        <!-- <el-form-item label="指定多人审批方式">
          <el-radio-group v-model="form.autoNextType">
            <el-radio label="会签（需所有人审批同意）"></el-radio>
            <el-radio label="或签（一名审批人同意或拒绝即可）"></el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "ApprovalButtonConfig",
  components: {},
  props: {
    id: String,
  },
  data() {
    return {
      tableData: [
        {
          key: "agreeBtn",
          title: "同意",
          name: "同意",
          showInput: false,
          isSelected: true,
        },
        {
          key: "refuseBtn",
          title: "不同意",
          name: "不同意",
          showInput: false,
          isSelected: true,
        },
        // {
        //   key: "saveBtn",
        //   title: "保存",
        //   name: "保存",
        //   showInput: false,
        //   isSelected: false,
        // },
        {
          key: "transferBtn",
          title: "转办",
          name: "转办",
          showInput: false,
          isSelected: false,
        },
        {
          key: "addSignBtn",
          title: "协助办理",
          name: "协助办理",
          showInput: false,
          isSelected: false,
        },
        {
          key: "fallbackBtn",
          title: "回退",
          name: "回退",
          showInput: false,
          isSelected: false,
        },
        {
          key: "autoNextBtn",
          title: "动态指定",
          name: "动态指定",
          showInput: false,
          isSelected: false,
        },
      ],
      isShowDynamic: false,
      form: {
        autoNextName: undefined,
        autoNextType: undefined,
      },
    };
  },
  created() {},
  computed: {},
  methods: {
    //初始化配置
    resetFormList() {
      //debugger;
      this.bpmnELement = window.bpmnInstances.bpmnElement;
      this.tableData = this.tableData.map((item) => {
        if (item.key !== "agreeBtn" && item.key !== "refuseBtn") {
          item.isSelected =
            window.bpmnInstances.bpmnElement.businessObject[item.key] ==
            undefined
              ? false
              : window.bpmnInstances.bpmnElement.businessObject[item.key];
        }
        if (item.key == "autoNextBtn") {
          if (window.bpmnInstances.bpmnElement.businessObject[item.key]) {
            this.isShowDynamic = true;
            this.form.autoNextName =
              window.bpmnInstances.bpmnElement.businessObject["autoNextName"];
          }
        }
        return item;
      });
    },
    changeBtn(row) {
      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
        [row.key]: row.isSelected,
      });
      if (row.key == "autoNextBtn") {
        this.isShowDynamic = row.isSelected;
        if (!row.isSelected) {
          this.form = {
            autoNextName: undefined,
            autoNextType: undefined,
          };
        }
      }
    },
    getName() {
      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
        autoNextName: this.form.autoNextName,
      });
    },
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        val && val.length && this.$nextTick(() => this.resetFormList());
      },
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__row {
  .cell {
    text-align: center;
  }

  .el-radio__label {
    display: none;
  }
}
</style>
